<template>
  <view class="question">
    <view class="fixed-top">
      <view class="header">
        <text class="title">AI 助手</text>
      </view>
      
      <view class="search-bar">
        <uni-easyinput 
          v-model="word" 
          placeholder="输入您的问题..." 
          :disabled="loading"
          @confirm="question"
          class="input-box"
        />
        <button 
          class="send-btn"
          @tap="question" 
          :disabled="loading || !word.trim()"
        >
          <text class="btn-text">{{ loading ? '请稍候...' : '发送' }}</text>
        </button>
      </view>
    </view>

    <scroll-view 
      scroll-y="true" 
      class="chat-history" 
      :scroll-top="scrollTop"
      :scroll-with-animation="true"
      ref="scrollView"
    >
      <view v-for="(item, index) in historys" :key="index" class="message">
        <view class="message-wrapper" :class="item.role">
          <view class="avatar">
            <image :src="item.role === 'user' ? '/static/icon/user.jpg' : '/static/icon/ai.png'" />
          </view>
          <view :class="item.role === 'user' ? 'user-message' : 'ai-message'">
            {{ item.content }}
          </view>
        </view>
      </view>
      <view class="typing-indicator" v-if="loading">
        <view class="dot"></view>
        <view class="dot"></view>
        <view class="dot"></view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref, nextTick } from 'vue';
import { onUnload } from '@dcloudio/uni-app';
import { CONFIG } from '../../utils/config';

const word = ref('');
const loading = ref(false);
const scrollTop = ref(0);
const scrollView = ref(null);

const model = ref({
  "model": "moonshot-v1-8k",
  "messages": [],
  "temperature": 0.3
});

const historys = ref([]);

// 滚动到底部
const scrollToBottom = async () => {
  await nextTick();
  const query = uni.createSelectorQuery().in(scrollView.value);
  query.select('.chat-history').boundingClientRect(data => {
    scrollTop.value = data.height * 2; // 确保滚动到底部
  }).exec();
};

async function question() {
  if (loading.value || !word.value.trim()) return;
  
  loading.value = true;

  try {
    // 添加用户问题到历史记录
    historys.value.push({
      "role": "user",
      "content": word.value
    });
    
    model.value.messages = historys.value;
    await scrollToBottom();

    const res = await uni.$post(CONFIG.keymi_url, model.value);
    
    // 添加AI回答到历史记录
    historys.value.push({
      "role": "assistant",
      "content": res.data.choices[0].message.content
    });
    
    word.value = ''; // 清空输入框
    await scrollToBottom();
    
  } catch (error) {
    console.error('请求失败:', error);
    uni.showToast({
      title: '请求失败，请重试',
      icon: 'none'
    });
  } finally {
    loading.value = false;
  }
}
</script>

<style>
.question {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f5f7fa;
}

.fixed-top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background-color: #fff;
}

.header {
  padding: 20rpx 32rpx;
  background-color: #ffffff;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.search-bar {
  padding: 24rpx;
  background-color: #ffffff;
  border-bottom: 2rpx solid #eef0f4;
  display: flex;
  gap: 20rpx;
  align-items: center;
}

.chat-history {
  flex: 1;
  padding: 24rpx;
  margin-top: 200rpx; /* 调整此值以适应顶部固定区域的高度 */
}

.message {
  margin-bottom: 32rpx;
}

.message-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 16rpx;
  padding: 0 20rpx;
}

.message-wrapper.assistant {
  flex-direction: row;
}

.message-wrapper.user {
  flex-direction: row-reverse;
}

.avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.avatar image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-message, .ai-message {
  max-width: 70%;
  padding: 24rpx;
  border-radius: 20rpx;
  font-size: 28rpx;
  line-height: 1.5;
  position: relative;
  word-break: break-word;
}

.user-message {
  background: linear-gradient(135deg, #0062ff, #0041d4);
  color: white;
  margin-right: 0;
  border-bottom-right-radius: 4rpx;
}

.ai-message {
  background-color: #ffffff;
  color: #333333;
  margin-left: 0;
  border-bottom-left-radius: 4rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
}

.typing-indicator {
  display: flex;
  gap: 8rpx;
  padding: 20rpx;
  justify-content: center;
}

.dot {
  width: 12rpx;
  height: 12rpx;
  border-radius: 50%;
  background-color: #0062ff;
  animation: bounce 1.4s infinite ease-in-out;
}

.dot:nth-child(1) { animation-delay: -0.32s; }
.dot:nth-child(2) { animation-delay: -0.16s; }

@keyframes bounce {
  0%, 80%, 100% { 
    transform: scale(0);
  } 
  40% { 
    transform: scale(1.0);
  }
}

::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
  color: transparent;
}
</style> 